<template>
	<view class="content">
		<u-swiper :list="list" class="header" indicator indicatorMode="line" :circular="true"></u-swiper>
		<view class="middle">
			<view class="title">
				Fresh Inspirations for You
			</view>
			<scroll-view class="scrollx" scroll-x="true" scroll-left="120">
				<view class="item" v-for="(item,index) in list2">
					<view class="box">
						<u--image class="img" :showLoading="true" :src="item.url" width="80px" height="80px" radius="10">
						</u--image>
						<div class="textbox">
							<u--text :lines="2" :text="item.text" size="10"
								style="white-space: pre-wrap; word-wrap: break-word; " lineHeight="15"></u--text>
						</div>
					</view>
				</view>
			</scroll-view>

		</view>
		<view class=" main">
			<view class="boxs" v-for="(item,index) in list3">

				<view class="video">
					<video id="myVideo" :src="item.url" @error="videoErrorCallback" controls></video>
				</view>
				<view class="texta">
					<view class=" title">
						{{item.name}}
					</view>
					<view class="name">
						管理员
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
	</view>

</template>

<script>
	export default {
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		data() {
			return {
				list: [
					"https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/6025c9e9-1e93-4861-8f5c-367d75b55502.png",
					"https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/012dd63d-32f5-4e4c-a11f-a62cd49ac37a.png",
					"https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/de2e3901-0fa7-436e-b802-319dcc6fc9cd.png"
				],
				list2: [{
						text: "很多人都在偷偷学的手绘技巧，仅用21天就成为了画画高手 好课推荐",
						url: "https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/775776ad-6853-418d-a789-f2264bc23851.png"
					},
					{
						text: "学画画网课哪个好 宝宝学画画课程推荐 儿童零基础学画画",
						url: "https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/b1dbb74d-351f-4413-9754-f4c4d3d95fc1.png"
					},
					{
						text: "简笔画，一学就会",
						url: "https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/d08afe1d-6a9d-4d2d-9d13-53085dcd27f2.png"
					},
					{
						text: "直播预告 简笔画很好玩 大绵羊BOBO老师给孩子上一堂脑洞绘画课",
						url: "https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/b700ba95-b8db-4ca4-b057-b184d026b2f5.png",
					}
				],
				list3: [{
						"url": "https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/ac4c9998-9473-4a6a-9786-cc2ce23e5110.mp4",
						"name": "思维导图课程 (3-6岁) | 树形图画法"
					},
					{
						"url": "https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/3200c6a5-b3a0-4431-9551-4e1edf8eb3c8.mp4",
						"name": "幼儿画画图片大全 儿童学画画入门教程"

					},
					{
						"url": "https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/87e17568-f173-400f-b104-e60f26af41cd.mp4",
						"name": "百万宝妈推荐一分钟精选课程；绘画英语双启蒙-如何画卡通吸血鬼"
					},
					{
						"url": "https://bucket-huanyushi.oss-cn-beijing.aliyuncs.com/95ead001-237c-4865-8dc3-d97acdd5023d.mp4",
						"name": "素描入门初级课程：教你画一条超逼真的鲤鱼素描手绘画！"

					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.content {
		// background-color: #E1E1E1;

		.header {
			margin: 15px 30rpx;
		}

		.middle {
			height: 150px;
			// background-color: #2979FF;
			margin: 10px 20px;

			.title {
				height: 30px;
				line-height: 30px;
				font-size: 22px;
			}

			.scrollx {
				width: calc(100vw - 40px);
				height: 130px;

				// background-color: #007AFF;
				white-space: nowrap;

				.item {
					display: inline-block;
					// background-color: #E1E1E1;

					.box {
						width: 80px;
						height: 130px;
						margin: 10px 10px;

						.img {

							margin-bottom: 5px;
							width: 60px;
						}

						.textbox {
							height: 30px;
						}
					}


				}
			}
		}

		.main {
			width: 700rpx;
			margin: 30px auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.boxs {
				width: 700rpx;
				// height: 300rpx;
				// background-color: #767A82;
				margin-bottom: 10px;
				border-radius: 3px;

				.video {
					width: 700rpx;
					height: 330rpx;
					background-color: #C0C4CC;

					video {
						width: 700rpx;
						height: 330rpx;
					}
				}

				.texta {
					.title {
						height: 60rpx;
						line-height: 30rpx;
						font-size: 22rpx;
						margin: 5rpx 10rpx;
						word-break: break-all;
						overflow: hidden;
						/* break-all(允许在单词内换行。) */
						text-overflow: ellipsis;
						/* 超出部分省略号 */
						display: -webkit-box;
						/** 对象作为伸缩盒子模型显示 **/
						-webkit-box-orient: vertical;
						/** 设置或检索伸缩盒对象的子元素的排列方式 **/
						-webkit-line-clamp: 2;
						/** 显示的行数 **/

					}

					.name {
						font-size: 20rpx;
						color: #C8C9CC;
						height: 30rpx;
						line-height: 30rpx;
						margin: 0 10rpx;
						margin-bottom: 5rpx;
						overflow: hidden;
						/* break-all(允许在单词内换行。) */
						text-overflow: ellipsis;
						/* 超出部分省略号 */
						display: -webkit-box;
						/** 对象作为伸缩盒子模型显示 **/
						-webkit-box-orient: vertical;
						/** 设置或检索伸缩盒对象的子元素的排列方式 **/
						-webkit-line-clamp: 1;
						/** 显示的行数 **/
					}
				}
			}
		}
	}

	.content::before {
		content: '';
		display: table;
		clear: both;
	}
</style>
